<template>
  <div class="v-attr-item-flow-table">
    <div class="_attribute-content g-fd-c">
      <PropertyItemFlowTable
        :key="data.modelData?.id"
        :itemFlowData="attributeTabsModel.itemFlowPaneModel.tableData"
        :modelId="data.modelData?.id"
        class="g-flex-1"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import PropertyItemFlowTable from "./PropertyItemFlowTable.vue";
const attributeTabsModel = computed(() => app.activeProject!.attributeTabsModel);

// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const data = computed(() => {
  return attributeTabsModel.value.data;
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-attr-item-flow-table {
  display: flex;
  padding-top: 16px;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  ._BackGroundWhite {
    background-color: white;
  }
  .__BackGroundGrey {
    background: $frame-siderbar-bg-color;
  }
  ._attribute-header {
    height: 28px;
    flex: 0;
    padding-left: 4px;
    padding-right: 8px;

    .divider {
      width: 1px;
      height: 16px;
      background: #b1cee2;
      margin: 0 8px;
    }
    ._sort {
      font-size: 0;
      display: inline-block;
      cursor: pointer;
      width: 24px;
      height: 24px;
      padding: 4px 0 0 4px;

      img {
        width: 14px;
        height: 14px;
      }
      &:hover {
        border: 1px solid #d0d0d0;
        background: $item-active-bg-color;
      }
      &._sort-active {
        background: $item-active-bg-color;
        border: 1px solid #e0e0e0;
        // background: linear-gradient(
        //   180deg,
        //   #b9e3ff 0%,
        //   #47b3ff 55%,
        //   #80c8fe 100%
        // );
      }
      // &:hover {
      //   background: linear-gradient(
      //     180deg,
      //     #b9e3ff 0%,
      //     #47b3ff 55%,
      //     #80c8fe 100%
      //   );
      // }
    }
  }
  ._attribute-content {
    flex: 1;
    height: 10px;

    // margin-left: 8px;
    background-color: white;
    .el-input__inner {
      box-shadow: none;
      height: 24px;
    }
  }
  .el-input__wrapper {
    box-shadow: none;
  }
  .el-input.is-disabled .el-input__wrapper {
    box-shadow: none;
  }
}
</style>
